<script lang="ts" setup>
import { ref } from "vue";
import { getPageList } from "@/api/merchant/wait-sign";
import { ReVxeGrid } from "@/components/ReVxeTable";
import { VxeGridPropTypes } from "vxe-table";
import dayjs from "dayjs";

const reVxeGridRef = ref();
let taxSourcesId = Number(sessionStorage.getItem("taxSourcesId"));
let merchantsInfoId = Number(sessionStorage.getItem("merchantsInfoId"));
const columns: VxeGridPropTypes.Columns<any> = [
  { type: "checkbox", title: "", width: 60, align: "center" },
  {
    title: "灵工姓名",
    field: "name",
    minWidth: 100
  },
  {
    title: "身份证号",
    field: "idCard",
    showOverflow: true,
    minWidth: 200
  },
  {
    title: "手机号",
    field: "phoneNumber",
    minWidth: 100
  },
  {
    title: "创建时间",
    field: "createTime",
    minWidth: 100
  }
];
const formRef = ref();

const handleInitialFormParams = () => ({
  taxSourcesId: taxSourcesId,
  merchantsInfoId: merchantsInfoId,
  name: "",
  idCard: "",
  phoneNumber: "",
  onlineSignIds:[],
  createTimeStart: "",
  createTimeEnd: "",
  timeRang: []
});
const formItems = [
  {
    field: "name",
    title: "",
    span: 4,
    itemRender: { name: "$input", props: { placeholder: "请输入灵工姓名" } }
  },
  {
    field: "idCard",
    title: "",
    span: 4,
    itemRender: { name: "$input", props: { placeholder: "请输入身份证号" } }
  },
  {
    field: "phoneNumber",
    title: "",
    span: 4,
    itemRender: { name: "$input", props: { placeholder: "请输入手机号" } }
  },
  {
    field: "timeRang",
    title: "",
    span: 6,
    itemRender: {},
    slots: { default: "timeRang" }
  },
  {
    span: 4,
    itemRender: {
      name: "$buttons",
      children: [
        {
          props: {
            type: "submit",
            icon: "vxe-icon-search",
            content: "查询",
            status: "primary"
          }
        },
        { props: { type: "reset", icon: "vxe-icon-undo", content: "重置" } }
      ]
    }
  }
];
const formData = ref<{
  taxSourcesId: number;
  merchantsInfoId: number;
  name: string;
  idCard: string;
  phoneNumber: string;
  signedOrNot: number;
  createTimeStart: string;
  createTimeEnd: string;
  onlineSignIds: string[];
  timeRang: string[];
}>(handleInitialFormParams());

const handleSearch = () => {
  if (formData.value.timeRang.length) {
    formData.value.createTimeStart = dayjs(formData.value.timeRang[0]).format("YYYY-MM-DD");
    formData.value.createTimeEnd = dayjs(formData.value.timeRang[1]).format("YYYY-MM-DD");
  } else {
    formData.value.createTimeStart = "";
    formData.value.createTimeEnd = "";
  }
  reVxeGridRef.value.loadData();
};

const handleReset = () => {
  formData.value = handleInitialFormParams();
};

const functions: Record<string, string> = {
  // add: "merchant.project.list.add",
  // edit: "merchant.project.template.edit",
  //  view: "merchant.management.index.view",
  // delete: "merchant.management.index.delete"
};
</script>
<template>
  <div>
    <el-card :shadow="`never`">
      <vxe-form
        ref="formRef"
        :data="formData"
        :items="formItems"
        @submit="handleSearch"
        @reset="handleReset"
      >
       <template #timeRang="{ data }">
          <el-date-picker
            clearable
            style="width: 100%"
            v-model="data.timeRang"
            type="daterange"
            range-separator="-"
            value-format="YYYY-MM-DD"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </template>
    </vxe-form>
    </el-card>
    <el-card :shadow="`never`" class="table-card">
      <ReVxeGrid
        ref="reVxeGridRef"
        :request="getPageList"
        :searchParams="formData"
        :columns="columns"
        :functions="functions"
      />
    </el-card>
    <div style="text-align: right;position: fixed;bottom: 20px;right:30px" class="mt-3">
      <el-button type="primary">批量生成协议</el-button>
      <el-button type="primary">批量生成协议</el-button>
    </div>
  </div>
</template>
